學習日誌19-event(事件)5

第 11 屆 iThome 鐵人賽

DAY 19

自我挑戰組

JavaScript學習日誌系列第 19 篇

11th鐵人賽

古德瑞

2019-10-04 22:59:22

2096 瀏覽

分享至

mouse - 滑鼠滑入指定內容事件觸發

滑鼠移動元素觸發事件練習

建一個方塊

<body>
    <div class="box"></div>
</body>

JS部分，宣告el變數來指定div.box

var el = document.querySelector('.box');

監聽滑鼠移動事件mousemove，設定好function

el.addEventListener('mousemove',function(e){
    alert('已觸碰');
},false);

網頁座標 - 了解screen、page、client差異

screen : 整個螢幕的解析度大小
page : 整個網頁內容長度
client : 瀏覽器窗口的大小
顯示 screen、page、client X跟Y軸的數字

HTML

//Html
<body>
    <ul>
        <li>screenX: <span class="screenX"></span> screenY: <span class="screenY"></span></li>
        <li>pageX: <span class="pageX"></span> pageY: <span class="pageY"></span> </li>
        <li>clientX: <span class="clientX"></span> clientY: <span class="clientY"></span></li>
    </ul>
</body>

宣告 screen、page、client X跟Y軸

var screenX = document.querySelector('.screenX');        
var screenY = document.querySelector('.screenY');        
var pageX = document.querySelector('.pageX');        
var pageY = document.querySelector('.pageY');        
var clientX = document.querySelector('.clientX');        
var clientY = document.querySelector('.clientY');

命名getPosition的 function，用textContent來對應各自數值

function getPosition(e) {                 
  screenX.textContent = e.screenX;                    
  screenY.textContent = e.screenY;                    
  pageX.textContent = e.pageX;                   
  pageY.textContent = e.pageY;                     
  clientX.textContent = e.clientX;                   
  clientY.textContent = e.clientY;
}

宣告el指定body，並監聽滑鼠移動

var el = document.body;      
el.addEventListener('mousemove', getPosition, false);

練習滑鼠指標黏住一顆球，隨著滑鼠移動跟著移動，透過clientX跟Y軸的數字，等同於球的上邊左邊距離邊線的數值

滑鼠指標通常是左上角開始計算

建構一顆球與CSS

//Html
<body>
    <div class="mouseball"></div>
</body>

//Css
.mouseball{
    width: 50px;            
    height: 50px;
    position: fixed;
    border-radius:50% 50%; background: #000;
}

JS部分，先宣告clientX軸跟Ｙ軸，再來那顆球

var clientX = document.querySelector('.clientX');        
var clientY = document.querySelector('.clientY');  
var mouseBall = document.querySelector('.mouseball');

命名getPosition的 function，
I. 用textContent渲染clientX跟clientY
II. 把clientX的值帶入mouseBall的left，表示橫向位置
III. 把clientY的值帶入mouseBall的top，表示縱向位置

function getPosition(e) {  
  clientX.textContent = e.clientX;                   
  clientY.textContent = e.clientY;
  mouseBall.style.left =e.clientX+'px';
  mouseBall.style.top =e.clientY+'px';             
}

宣告el指定body，並監聽滑鼠移動

var el = document.body;      
el.addEventListener('mousemove', getPosition, false);

學習日誌18-event(事件)4

學習日誌20-localstorage(瀏覽器資料儲存)1

系列文

JavaScript學習日誌共 30 篇

RSS系列文訂閱系列文

11 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙

JavaScript學習日誌系列 第 19 篇

學習日誌19-event(事件)5

mouse - 滑鼠滑入指定內容事件觸發

網頁座標 - 了解screen、page、client差異

尚未有邦友留言

標記使用者

JavaScript學習日誌系列第 19 篇